<template>
	<div class="banner-bg">
		<div class="banner">
			<swiper
				:loop="true"
				:spaceBetween="30"
				:navigation="true"
				:pagination="{
					clickable: true,
				}"
				:modules="modules"
				class="swiper-no-swiping"
			>
				<swiper-slide class="ban-img" v-for="item in banData" :key="item.id">
					<a href="javascript:;"
						><img class="bannerImg" :src="item.imageUrl" alt=""
					/></a>
				</swiper-slide>
			</swiper>
			<div class="download">
				<a href="javascript:;"></a>
				<p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
				<span class="shadow"></span>
				<span class="shadow shadowr"></span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "RecommendedBanner",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import { getHomeBanner } from "@/api/Recommended";

import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

const modules = [Autoplay, Pagination, Navigation];

const banData = ref(0);

onMounted(async () => {
	getRebBan();
});

const getRebBan = async () => {
	const bannerdata = await getHomeBanner();
	banData.value = bannerdata.banners;
};
</script>

<style lang="less">
.banner-bg {
	width: 100%;
	background: #a996e5;
}
.banner {
	width: 1100px;
	margin: 0 auto;
	position: relative;
	.ban-img {
		height: 285px;
		.bannerImg {
			display: block;
			width: 730px;
			height: 100%;
		}
	}

	.download {
		position: absolute;
		top: 0;
		z-index: 20;
		right: 70px;
		width: 254px;
		height: 285px;
		background: url(@/image/download11.png) no-repeat 0 0;
		a {
			display: block;
			width: 215px;
			height: 56px;
			margin: 186px 0 0 19px;
			background: url(@/image/download11.png) no-repeat 0 0;
			background-position: 0 9999px;
		}
		a:hover {
			background-position: 0 -290px;
			text-decoration: none;
		}
		p {
			margin: 10px 0;
			text-align: center;
			color: #8d8d8d;
		}
		.shadow {
			display: block;
			position: absolute;
			top: 0;
			left: -20px;
			width: 20px;
			height: 285px;
			background: url(@/image/banner.png) no-repeat 0 0;
			background-position: -1px 0;
		}
		.shadowr {
			left: auto;
			right: -20px;
			background-position: -20px 0;
		}
	}

	.swiper {
		padding: 0 70px;
		// overflow: visible;
		.swiper-button-prev {
			left: 0px;
			font-size: 34px;
			padding: 10px;
		}
		.swiper-button-next {
			right: 0px;
			padding: 10px;
		}
		.swiper-button-prev:after,
		.swiper-button-next:after {
			color: #fff;
			z-index: 9;
		}
		.swiper-button-prev:before,
		.swiper-button-next:before {
			content: "";
			position: absolute;
			top: -120px;
			left: 0;
			z-index: 8;
			width: 70px;
			height: 285px;
			background: #a996e5;
		}
		.swiper-button-prev:hover,
		.swiper-button-next:hover {
			background: #201f1e;
		}
	}
}
</style>
